<template>
  <!-- <div id="app">
      <div class="title">
          <div class="btn" @click="msg='Login'">登录</div>
          <div class="btn" @click="msg='Reg'">注册</div>
      </div>
      <component :is="msg"></component>
  </div> -->
  <router-view></router-view>
</template>
 
<script>
//这里的from路径根据自己的布局更改路径
import Login from './views/login.vue'
import Reg from './views/register.vue'
export default {
  name: 'App',
  data(){
      return{
          msg:"Login"
      }
  },
  components: {
    Login,
    Reg
  }
}
</script>
 
<style>
.title{
    text-align: center;
    background-image: linear-gradient(to right, #e8f2b7, #bbf6db);
}
.btn {   
    background-color: rgb(210,193,326);
    border-radius:28px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627; 
    margin: 10px 20px;  
}
.btn:hover {
    background-color:rgb(180,193,237);
}
.btn:active {
    position:relative;
    top:1px;
}
</style>